<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 使用v-cloak 能够解决插值表达式闪烁问题 --就是当网速慢的时候 没有获取到值 页面会把花括号渲染出来 -->
        <!-- 必须搭配样式 属性选择器 -->
        <!-- 想要演示出这个效果，必须用服务器托管，需要安装Express插件，然后 ctrl+shift+p 
        找到Express:host current workerspace and open in browser 在地址栏localhost后面拼上文件名
        如localhost/02.v-cloak的学习.html -->

        <P v-cloak>>>>>{{msg}}<<<<<</P>
        <!-- 默认v-text是没有闪烁问题的 -->
        <!-- v-text会覆盖元素原本的内容，但是插值表达式只会替换自己占位的地方  -->
        
        <h4 v-text="msg">-----</h4>

        <div>{{msg2}}</div>

        <div v-text="msg2"></div>

        <div v-html="msg2"></div>

        <!-- 这种写法 title 就是 mytitle这个字符串，如果想使用 data中mytitle的值，需要使用v-bind来绑定这个title属性
        格式 v-bind:属性="data里面的属性 +'自定义的字符串'" 即v-bind中可以写合法的js表达式
        v-bind: 可简写为 : -->
        <input type="button" value="按钮" title="mytitle">
        <input type="button" value="按钮" v-bind:title="mytitle">
        <input type="button" value="按钮" :title="mytitle + '111'">
        <input type="button" value="按钮" :title="mytitle + mytitle2">
        <hr>
        <!-- 使用js实现点击事件  -->
        <input type="button" value="按钮" id="btn">
        <!-- 使用vue提供的事件绑定机制 绑定的方法在Vue实例中的methods属性中 -->
        <input type="button" value="按钮" v-on:click="show">
        <!-- v-on: 可以简写为 @  -->
        <input type="button" value="按钮" @click="show">
        <input type="button" value="按钮" v-on:mouseover="show">

    </div>



    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'123',
                msg2:'<h1>我是一个大大的标题</h1>',
                mytitle:'我是一个title',
                mytitle2:'我也是一个title'
            },
            methods:{ //这个methods属性定义了当前Vue实例的所有可以方法
                show:function(){
                    alert('Hello Vue')
                }
            }
        })
        /*
        使用js实现点击事件
        document.getElementById("btn").onclick = function(){
            alert("Hello")
        }
        */

    </script>

</body>
</html>